<template>
    <div class="toreservation">
        <h4>预约医生</h4>
        <div>
            <el-form :model="form" :rules="rules" ref="reserveForm">
                <el-form-item label="宠物名称" label-width="120px" prop="petId">
                    <el-select clearable v-model="form.petId" placeholder="选择你的宠物" style="width: 30%">
                        <el-option v-for="item in petList" :key="item.id" :label="item.name" :value="item.id">
                            <i :class="item.value" /> {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约时间" label-width="120px" prop="reserveTime">
                    <el-select clearable v-model="form.reserveTime" placeholder="选择预约时间" style="width: 30%"
                        @change="petChange">
                        <el-option v-for="item in dateList" :key="item.date" :label="item.date" :value="item.date">
                            <i :class="item.value" /> {{ item.date }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约描述" label-width="120px" prop="description">
                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" placeholder="请简述宠物当前状况"
                        value-format="yyyy-MM-dd" v-model="form.description">
                    </el-input>
                </el-form-item>
                <div class="reserveBtn">
                    <el-button type="success" style="width: 120px;height: 35px;font-size: 15px;"
                        @click="goReserve">立即预约</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: "ToReservation",
    data() {
        return {
            doctorId: 0,
            form: {},
            petList: [],
            dateList: [],
            rules: {
                petId: [
                    { required: true, message: '还未选择需要预约治疗的宠物', trigger: 'change' },
                ],
                reserveTime: [
                    { required: true, message: '还未选择预约时间', trigger: 'change' },
                ],
                description: [
                    { required: true, message: '请简述宠物当前状况', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        this.doctorId = this.$route.query.doctorId;
        console.log("当前得dcotorId==>", this.doctorId)
        this.getMyPet()
        this.getDateList()
        // for(var i=0;i<10;i++){
        //     this.dateList.push(new Date)
        // }
    },
    methods: {
        getMyPet() {//获取宠物下拉框获取 根据用户id
            var id = JSON.parse(localStorage.getItem("customer")).id
            // console.log("当前customerid====>",id)
            this.request.get("/pet/byCustomerId/" + id).then(res => {
                if (res.code == 200) {
                    this.petList = res.data.petList
                }
            })
        },
        petChange(petId) {
            console.log("当前doctorId", petId)
        },
        goReserve() {
            //发起预约请求
            this.$refs['reserveForm'].validate((valid) => {
                if (valid) {
                    this.form.userId = this.doctorId
                    this.form.customerId = JSON.parse(localStorage.getItem("customer")).id
                    var date = this.getDate(this.form.reserveTime)
                    console.log("当前form==》", date)
                    this.request.post("/reserve", {
                        userId: this.form.userId,
                        customerId: this.form.customerId,
                        petId: this.form.petId,
                        reserveTime: date,
                        description: this.form.description
                    }).then(res => {
                        if (res.code == 200) {
                            this.$message.success("预约成功，请前往个人中心查看详情记录")
                            this.$router.push("/front/my/myreserve")
                        }
                    })
                }
            });

        },
        getDateList() {
            //渲染后7天日期下拉框
            var date = new Date();
            var base = new Date(date).getTime();
            var oneDay = 24 * 3600 * 1000;
            var date = [];
            var data = [Math.random() * 300];
            var time = new Date(base);
            date.push({ date: [time.getFullYear(), time.getMonth() + 1, time.getDate()].join('/'), index: 1 });
            for (var i = 1; i < 7; i++) {//控制需要的天数
                var now = new Date(base += oneDay); //这里控制往前一周还是往后一周
                date.push({ date: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), index: i + 1 });
                // data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
            }
            var newdate = date; //往后一周的话需要将数组倒叙，完后不需要
            this.dateList = newdate

        },
        //字符串转日期格式，strDate要转为日期格式的字符串
        getDate(strDate) {

            let date = new Date()
            date.setFullYear(1990)
            date.setDate(1)
            date.setMonth(0)
            date.setFullYear(parseInt(strDate.substring(0, 4)))
            date.setDate(parseInt(strDate.substring(strDate.lastIndexOf("/") + 1)))
            date.setMonth(parseInt(strDate.substring(strDate.indexOf("/") + 1, strDate.lastIndexOf("/"))) - 1)

            return date
        }



    }
}
</script>

<style lang="less" scoped>
.toreservation {
    h4 {
        text-align: center;
    }

    .reserveBtn {
        text-align: center;
        font-size: 18px;
    }
}
</style>